<template>
  <div class="avue-sidebar">
    <logo></logo>
    <el-scrollbar style="height: 100%">
      <div v-if="validatenull(menu)" class="avue-sidebar--tip">
        没有发现菜单
      </div>
      <el-menu
        :collapse="keyCollapse"
        :default-active="nowTagValue"
        :show-timeout="200"
        mode="vertical"
        unique-opened
      >
        <sidebar-item
          :collapse="keyCollapse"
          :menu="newMenuList"
          :props="website.menu.props"
          :screen="screen"
          first
        ></sidebar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import logo from "../logo";
import sidebarItem from "./sidebarItem";
import { getStore, removeStore, setStore } from "@/util/store";
export default {
  name: "sidebar",
  components: { sidebarItem, logo },
  data() {
    return {
      newMenuList: [],
    };
  },
  watch: {
    "$store.state.user.path": {
      handler: function (newVal, oldVal) {
        // 如果 path 为空，则清空菜单
        if (!newVal || !newVal.path) {
          this.newMenuList = [];
          // 清空缓存中的左侧菜单
          setStore({
            name: "sidebarMenu",
            content: [],
            type: "session",
          });
          return;
        }
        let arr = this.menu.filter((e) => {
          return e.path == newVal.path;
        });

        // 确保找到了匹配的菜单项
        if (arr && arr.length > 0) {
          this.$router.$avueRouter.formatRoutes(arr[0].children, true);
          this.newMenuList = arr[0].children;
          this.$store.dispatch("setNewMenuList", arr[0].children);

          // 保存左侧菜单到缓存
          setStore({
            name: "sidebarMenu",
            content: arr[0].children,
            type: "session",
          });
        }
      },
    },
  },
  created() {
    // 优先从缓存恢复左侧菜单
    const sidebarMenu = getStore({ name: "sidebarMenu" });
    const path = getStore({ name: "activeMenu" });

    if (sidebarMenu && sidebarMenu.length > 0) {
      this.$router.$avueRouter.formatRoutes(sidebarMenu, true);
      this.newMenuList = sidebarMenu;
      this.$store.dispatch("setNewMenuList", sidebarMenu);
      this.$forceUpdate();

      // return;
    }

    // 如果没有左侧菜单缓存，则尝试从顶部菜单恢复

    if (path) {
      let arr = this.menu.filter((e) => {
        return e.path == path;
      });
      if (arr && arr.length > 0) {
        this.$router.$avueRouter.formatRoutes(arr[0].children, true);
        this.newMenuList = arr[0].children;
        this.$store.dispatch("setNewMenuList", arr[0].children);
        this.$forceUpdate();
        // 保存左侧菜单到缓存
        setStore({
          name: "sidebarMenu",
          content: arr[0].children,
          type: "session",
        });
      }
    }
  },
  computed: {
    ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen"]),
    nowTagValue: function () {
      return this.$router.$avueRouter.getValue(this.$route);
    },
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped></style>
